<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="common/include :: header('修改系统附件')"/>
    <th:block th:include="common/include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-attachment-edit" th:object="${sysAttachment}">
        <input name="id" th:field="*{id}" type="hidden">
        <div class="form-group">
            <label class="col-sm-3 control-label">模块名：</label>
            <div class="col-sm-8">
                <input name="module" th:field="*{module}" class="form-control" th:disabled="disabled">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">保存类型：</label>
            <div class="col-sm-8">
                <div class="radio-box" th:each="dict : ${@dict.getType('sys_file_save')}" th:field="*{saveType}">
                    <input type="radio" th:id="${dict.dictCode}" name="saveType" th:value="${dict.dictValue}" th:field="*{saveType}">
                    <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">文件：</label>
            <div class="col-sm-8">
                <input name="fileName" th:field="*{fileName}" class="form-control" type="hidden">
                <input id="fileUploads" type="file" name="file" class="imgFile form-control">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">文件类型：</label>
            <div class="col-sm-8">
                <div class="radio-box" th:each="dict : ${@dict.getType('sys_file_type')}">
                    <input type="radio" th:id="${dict.dictCode}" name="fileType" th:value="${dict.dictValue}" th:field="*{fileType}" disabled>
                    <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">保存路径：</label>
            <div class="col-sm-8">
                <input name="savePath" th:field="*{savePath}" class="form-control" th:disabled="disabled">
            </div>
        </div>
    </form>
</div>
<th:block th:include="common/include :: footer"/>
<th:block th:include="common/include :: bootstrap-fileinput-js"/>
<script type="text/javascript">
    var prefix = ctx + "system/attachment";
    var savePath = '[[${sysAttachment.savePath}]]';
    $('#fileUploads')
        .fileinput({
            language: 'zh',
            uploadUrl: prefix + '/upload',
            showCaption: true,
            showUpload: true,
            showRemove: true,
            showClose: true,
            browseClass: 'btn btn-primary',
            initialPreview: [ //预览图片的设置
                '<img src="'+savePath+'" alt="图片未找到" class="file-preview-image" width="170" height="110">'
            ],
            initialPreviewConfig: [
                {
                    width: '120px',
                    showDelete: false
                }
            ],
            uploadExtraData: function (previewId, index) {
                var data = {
                    id: $("input[name='id']").val(),
                    saveType: $("input[name='saveType']:checked").val()
                };
                return data;
            }
        })
        .on("change", function () {
            // 清除掉上次上传的图片
            $(".uploadPreview").find(".file-preview-frame:first").remove();
            $(".uploadPreview").find(".kv-zoom-cache:first").remove();
        })
        .on("filebatchselected", function (e, files) {
            $(this).fileinput("upload");             // 文件选择完直接调用上传方法。
        })
        .on("fileuploaded", function (e, data, previewiId, index) {       // 上传完成后的处理
            savePath = data.savePath;
        });
</script>
</body>
</html>
